<template>
	<view class="car">
		<view class="shopList" v-if="list.length">
			<view class="shopOne dFlex jStart_aCenter" v-for="(item,index) in list" :key='index'>
				<view :class="['status','imgPublic']" @tap.stop='changeStatus(item)'>
					<image v-if="!item.selStatus && item.stock>0" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
					<image v-if="item.selStatus && item.stock>0" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
				</view>
				<view class="shopInfo dFlex jStart_aStart" @tap.stop='lookDetail(item.goods_id,"0")'>
					<view class="shopImg imgPublic">
						<image :src="item.main_img" mode="widthFix"></image>
						<view class='noStock dFlex jBetween_aCenter'>
							<view class="stockDesc" v-if='item.stock <= "0" || item.shop_status == "0"'>商品无货</view>
							<!-- <view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
								<view class='showYJ'>佣</view>
								<text>{{(parseFloat(item.price) * parseFloat(item.service_rate) / 100).toFixed(2)}}</text>
							</view> -->
						</view>
					</view>
					<view class="other">
						<view class="shopName">{{item.goods_title}}</view>
						<view class="spec">{{item.attr_name?item.attr_name:'默认'}}</view>
						<!-- <view class="spec" @tap.stop='changeSpec(item)'>{{item.attr_name?item.attr_name:'默认'}}</view> -->
						<view class="base dFlex jBetween_aCenter">
							<view class="price">¥<text>{{item.price}}</text></view>
							<u-number-box bg-color='#ffffff' v-model="item.num" size='24' @change='changeNum(item)'></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shopList empty imgPublic" v-else style="background:none;">
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
		</view>
		<!-- 热门推荐 -->
		<view class='recommend'>
			<view class='title dFlex jCenter_aCenter'>
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/car_comment.png" mode="widthFix"></image>
			</view>
			<view class="shops dFlex jBetween_aStart fWap">
				<view class="partOne" v-for="(item,index) in groomShop" @click='lookDetail(item.id,"0")' :key='index'>
					<view class="shopImg imgPublic dFlex jCenter_aCenter">
						<image :src="item.main_img" mode="widthFix"></image>
						<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
							<view class='showYJ'>佣</view>
							<text>{{(parseFloat(item.min_price) * parseFloat(item.service_rate) / 100).toFixed(2)}}</text>
						</view>
					</view>
					<view class="shopInfo">
						<view class="shopName">
							<text>{{item.title}}</text>
						</view>
						<view class="orderNum" v-if="item.salenum>0">{{item.salenum}}人下单</view>
						<view class="other dFlex jBetween_aCenter">
							<view class="price">
								<!-- <text v-if="item.act_type == '0'">优惠后</text>
								<text v-if="item.act_type == '1'">拼团价</text>
								<text v-if="item.act_type == '2'">秒杀价</text> -->
								￥<text class="priceCenter">{{item.min_price > 0?parseFloat(item.min_price):parseFloat(item.price)}}</text>
								<text class="oldPrice">{{"￥"+parseFloat(item.old_price)}}</text>
							</view>
							<!-- <view class="addCarIcon imgPublic" @tap.stop='addCar(item)'>
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_car.png" mode="widthFix"></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<view class="tools dFlex jBetween_aCenter">
			<view class="operate dFlex jStart_aCenter">
				<view class="selStatus dFlex jStart_aCenter" @tap='changeAll_sel'>
					<view class="statusIcon imgPublic">
						<image v-if="!sel_all_status" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
						<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
					</view>
					<text>全选</text>
				</view>
				<text class="del" @tap='del_some'>删除</text>
			</view>
			<view class="tj dFlex jEnd_aCenter">
				<view class="allPrice">合计 <text>{{allPrice?" ¥"+allPrice.toFixed(2):' ¥0.00'}}</text> </view>
				<view class="jiesuan" @tap='jiesuan'>去结算</view>
			</view>
		</view>
		<!-- 商品规格弹窗 -->
		<view class="zz dFlex flexDirection jEnd_aCenter" v-if="specFlag">
			<view class="spec">
				<view class="closeIcon imgPublic" @tap.stop='specFlag = false'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/closeIcon.png" mode="widthFix"></image>
				</view>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="datas.main_img" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="shopName">{{datas.title}}</view>
						<view class="selSpec">{{selSpecStr?selSpecStr+"  x"+needChange.num:'未选择规格数量'}}</view>
						<view class="price">¥{{showPrice?parseFloat(showPrice).toFixed(2) * needChange.num:datas.price}}</view>
					</view>
				</view>
				<view class="specList">
					<text class="title">规格</text>
					<view class="part" v-for="(item,index) in spec" :key='index'>
						<text class="tit">{{item.name}}</text>
						<view class="partList dFlex jStart_aStart fWap">
							<view :class="['specOne',selSpec[index].id == item2.id?'active':'']" v-for="(item2,index2) in item.arr" :key='index2' @tap.stop='selSpecOne(index,index2)'>{{item2.name}}</view>
						</view>
					</view>
				</view>
				<view class="specList dFlex jBetween_aCenter">
					<text class="title">数量</text>
					<u-number-box v-model="needChange.num" bg-color='#ffffff'></u-number-box>
				</view>
				<view class="addCar" @tap.stop='addCar' v-if='canOrder' @tap='addCar()'>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{
					auth_status:'-1',
				},
				isLogin:false,
				list:[],
				selShop:[],
				sel_all_status:false,
				haveNoStock:false,
				allPrice:'',
				
				// 某一个商品规格弹窗
				datas:{},
				specFlag:false,
				selSpec:[],//选择的商品规格
				selSpecStr:'',//商品规格字符串
				showPrice:'',// 商品规格价格
				spec:'',//规格数组
				canOrder:'',//是否可以修改
				needChange:{},
				
				groomShop:[],
			};
		},
		onShow() {
			this.isLogin = uni.getStorageSync('uToken')?true:false;
			if(this.isLogin){
				this.sel_all_status = false;
				this.selShop = [];
				this.allPrice = '';
				this.initList();
				this.initUser();
			}
			this.getTuiJian();
		},
		methods:{
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.user = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 推荐商品
			getTuiJian(){
				this.tool.getData('/api/mall/getGoodsList',{
					page:1,
					pageSize:20,
					is_tj:'1',
				}).then(res=>{
					console.log('推荐商品');
					console.log(res);
					if(res){
						this.groomShop = res.length ? res : [];
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 数据列表
			initList(){
				this.tool.getData('/api/mall/cartGoodsList',{}).then(res=>{
					if(res){
						res.map((item,index)=>{
							item.selStatus = false;
						})
						res.sort(this.compare('add_time'));
						this.list = res.length?res:[];
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			compare(property){
			    return function(a,b){
			        var value1 = a[property];
			        var value2 = b[property];
			        return value2 - value1;
			    }
			},
			// 查看商品详情
			lookDetail(id,type){
				uni.navigateTo({
					url:'../seller/shopDetail?actType='+type+'&id='+id
				})
			},
			// 结算商品
			jiesuan(){
				if(!this.selShop.length){
					uni.showToast({
						title:'请选择需要结算的商品',
						icon:'none'
					})
					return;
				}
				this.selShop.forEach((item)=>{
					if(item.stock <= 0){
						uni.showToast({
							title:'库存不足的商品无法结算',
							icon:'none'
						})
						return;
					}
				})
				let shopInfo = [];
				this.selShop.map((item,index)=>{
					shopInfo.push({
						id:item.id,
						main_img:item.main_img,
						title:item.goods_title,
						count:item.num,
						specName:item.use_attr?item.attr_name:'默认',
						specId:item.use_attr?item.goods_attr_id:'',
						showPrice:item.price,
					})
				})
				uni.navigateTo({
					url:'../seller/beforeOrder?status=2&shopInfo='+JSON.stringify(shopInfo),
				})
			},
			// 选中未选中状态
			changeStatus(line){
				if(line.selStatus){
					let idx = this.tool.getIdx(this.selShop,'id',line.id);
					if(idx != -1){
						this.selShop.splice(idx,1);
					}
					line.selStatus = false;
					this.sel_all_status = false;
				}else{
					line.selStatus = true;
					
					this.selShop.push(line);
				}
				this.calcPrice();
			},
			// 是否全选
			changeAll_sel(){
				this.sel_all_status = !this.sel_all_status;
				if(this.sel_all_status){
					this.list.map((item,index)=>{
						item.selStatus = true;
						this.selShop.push(item);
					})
				}else{
					this.list.map((item,index)=>{
						item.selStatus = false;
					})
					this.selShop = [];
				}
				this.calcPrice();
			},
			// 删除选中的
			del_some(){
				if(!this.selShop.length){
					uni.showToast({
						title:'请选择需要删除的商品',
						icon:"none"
					})
				}else{
					let ids = '';
					this.selShop.map((item,index)=>{
						index == this.selShop.length-1?ids = ids+item.id:ids = ids+item.id+','; 
					})
					if(ids){
						uni.showModal({
							content:"确定删除选中的商品？",
							success: (op) => {
								if(op.confirm){
									this.tool.getData('/api/mall/delShoppingCartGoods',{
										ids:ids,
									}).then(res=>{
										if(res){
											this.sel_all_status = false;
											this.selShop = [];
											this.allPrice = '';
											this.initList();
										}
									}).catch(err=>{
										console.log(err);
									})
								}
							}
						})
					}
				}
			},
			// 修改某一个商品数量
			changeNum(line){
				this.tool.getData('/api/mall/chgShoppingCart',{
					id:line.id,
					goods_attr_id:line.goods_attr_id,
					num:line.num
				}).then(res=>{
					if(res){
						this.calcPrice();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 计算是否全部选中 选中商品需要显示的总价格
			calcPrice(){
				this.allPrice = 0; 
				if(this.selShop.length){
					if(this.selShop.length == this.list.length){
						this.sel_all_status = true;
					}else{
						this.sel_all_status = false;
					}
					this.selShop.map((item,index)=>{
						this.allPrice = this.allPrice + item.price * item.num;
					})
				}
			},
			// 修改商品规格
			changeSpec(line){
				if(line.use_attr){
					this.selSpec=[];//选择的商品规格
					this.selSpecStr='';//商品规格字符串
					this.showPrice='';// 商品规格价格
					this.spec = [];//规格数组
					this.needChange = line;
					this.tool.getData('/api/mall/getGoodsDetail',{
						id:line.goods_id,
					}).then(res=>{
						if(res){
							this.datas = res;
							if(res.use_attr){//多规格
								// 规格名称
								let spec_name = res.attr_group.split('_');
								spec_name.map((item,index)=>{
									this.spec.push({
										name:item,
										arr:[],
									})
								})
								// 规格值
								res.attribute_list.map((item,index)=>{
									let item_ids = item.id.split('_');
									let item_name = item.name.split('_');
									item_ids.map((item2,index2)=>{
										let idx = this.tool.getIdx(this.spec[index2].arr,'id',item2);
										if(idx == -1){
											this.spec[index2].arr.push({
												id:item2,
												name:item_name[index2]
											})
										}
									})
								})
							}else{ // 默认规格
								this.spec = [
									{
										name:'默认规格',
										arr:[{id:'0',name:'默认规格',stock:res.stock,price:res.price,weight:res.weight}]
									}
								],
								this.selSpec = [{id:'0',name:"默认规格"}];
								this.selSpecStr = '默认规格';
								this.showPrice = res.price;
							}
							if(res.stock<=0){
								this.canOrder = false;
							}
							this.specFlag = true;
						}
					}).catch(err=>{
						
					})
				}else{
					uni.showToast({
						title:'暂无可选规格',
						icon:"none"
					})
				}
			},
			// 选择规格
			selSpecOne(idx1,idx2){
				let arr = this.spec[idx1].arr;
				this.selSpec.splice(idx1,1,arr[idx2]);
				// 选择的规格的名称
				this.selSpecStr = '';
				this.selSpecId = '';
				this.selSpec.map((item,index)=>{
					if(index!=this.selSpec.length-1){
						this.selSpecStr = this.selSpecStr + item.name + '_';
						this.selSpecId = this.selSpecId + item.id + '_';
					}else{
						this.selSpecStr = this.selSpecStr + item.name;
						this.selSpecId = this.selSpecId + item.id;
					}
				})
				// 选择的规格的价格
				for(let i=0;i<this.datas.attribute_list.length;i++){
					if(this.datas.attribute_list[i].id == this.selSpecId){
						this.showPrice = this.datas.attribute_list[i].price;
						if(this.datas.attribute_list[i].stock>0){
							this.canOrder = true;
						}else{
							this.canOrder = false;
						}
					}
				}
			},
			// 修改到购物车
			addCar(){
				if(this.datas.use_attr){//多规格
					if(this.selSpec.length == this.spec.length){
						let goods_attr_id = '';
						this.selSpec.map((item,index)=>{
							if(index!=this.selSpec.length-1){
								goods_attr_id = goods_attr_id+item.id+'_';
							}else{
								goods_attr_id = goods_attr_id+item.id;
							}
						})
						// 判断选择的规格是否还有库存
						this.datas.attribute_list.map((item,index)=>{
							if(item.id == goods_attr_id && item.stock<=0){
								uni.showToast({
									title:'该规格库存不足',
									icon:"none"
								})
								return;
							}
						})
						this.tool.getData('/api/mall/chgShoppingCart',{
							id:this.needChange.id,
							goods_attr_id:goods_attr_id,
							num:this.needChange.num,
						}).then(res=>{
							if(res){
								uni.showToast({
									title:'修改成功',
									icon:'success'
								})
								this.specFlag = false;
								this.sel_all_status = false;
								this.selShop = [];
								this.allPrice = '';
								this.initList();
							}
						}).catch(err=>{
							console.log(err);
						})
					}else{
						uni.showToast({
							title:"商品规格选择不完整",
							icon:"none"
						})
						this.specFlag = true;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.car{
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
		// 热门推荐
		.recommend{
			.shops{
				width:100%;
				position: relative;
				.partOne{
					width:49%;
					background:white;
					border-radius: 4px;
					margin-bottom:12px;
					.shopInfo{
						width:100%;
						padding: 12rpx 14rpx 20rpx;
						box-sizing: border-box;
						.other{
							width: 100%;
							.price{
								flex: 1;
								font-size: 10px;
								color: $col_active;
								.priceCenter{
									font-size: 17px;
									font-weight: 900;
								}
								.oldPrice{
									color:#999999;
									display: inline-block;
									margin-left: 3px;
									text-decoration: line-through;
								}
							}
							.addCarIcon{
								width: 42rpx;
								height:42rpx;
							}
						}
						.tags{
							width: 100%;
							margin:0 0 4rpx;
							.tagOne{
								font-size: 12px;
								width: max-content;
								display: inline-block;
								padding: 0 4px;
								line-height: 16px;
								border:1px solid #FC9700;
								color: #FC9700;
								border-radius: 4px;
								margin-right: 6px;
								margin-bottom: 4px;
							}
							.tagOne:last-child{
								margin-right: 0;
							}
						}
						.orderNum{
							font-size: 12px;
							color: #999999;
							margin: 4rpx 0 8rpx;
						}
						.shopName{
							width:100%;
							font-weight: 500;
							text-align: justify;
							.shopTag{
								width: max-content;
								display: inline-block;
								color: white;
								font-size: 12px;
								padding: 4rpx 8rpx;
								border-radius: 6rpx;
								margin-right:8rpx;
							}
							.status1{
								background: #F11D1C;
							}
							.status2{
								background: #FF5000;
							}
							.status3{
								background: #333333;
							}
						}
					}
					.shopImg{
						width:100%;
						height: 342rpx;
						padding: 16rpx;
						position: relative;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
				}
			}
			.title{
				padding:15px 0;
				image{
					width:65vw;
				}
			}
		}
		.zz{
			.spec{
				width: 100%;
				padding: 12px;
				box-sizing: border-box;
				background: white;
				border-top-left-radius:8px;
				border-top-right-radius:8px;
				position: relative;
				.closeIcon{
					position: absolute;
					width: 16px;
					height: 16px;
					top: 12px;
					right: 12px;
				}
				.addCar{
					width: 100%;
					padding: 12px 0;
					border-radius: 40px;
					color:white;
					text-align: center;
					background: $col_active;
				}
				.specList{
					margin-bottom: 24px;
					.part{
						width: 100%;
						.tit{
							font-size: 12px;
							margin: 5px 0;
							color: #999999;
							display: block;
						}
						.partList{
							width: 100%;
							.specOne{
								width:22%;
								overflow:hidden;
								white-space:nowrap;
								text-overflow: ellipsis;
								text-align: center;
								padding: 6px 12px;
								box-sizing: border-box;
								background: #F6F6F6;
								border-radius: 8px;
								margin-right: 12px;
								margin-bottom: 10px;
								font-weight: 400;
								border: 1px solid #F6F6F6;
							}
							.specOne:nth-child(4n+4){
								margin-right: 0;
							}
							.active{
								background: rgba(252,68,36,0.06);
								color: #FC4424;
								border:1px solid #FC4424;
							}
						}
					}
				}
				.shopInfo{
					width: 100%;
					margin-bottom: 24px;
					.shopImg{
						width:96px;
						height: 96px;
						overflow: hidden;
						background: white;
						margin-right: 12px;
						border-radius: 8px;
					}
					.other{
						flex: 1;
						.price{
							font-size: 18px;
							color: #FC4424;
							font-weight: bold;
						}
						.selSpec{
							font-size: 12px;
							color: #999999;
							margin: 12px 0 6px;
						}
						.shopName{
							font-size: 18px;
						}
					}
				}
			}
		}
		.tools{
			width: 100%;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 6px 12px;
			box-sizing: border-box;
			.tj{
				flex: 1;
				.allPrice{
					text{
						font-size: 20px;
						color: #FF0000;
						font-weight: bold;
					}
				}
				.jiesuan{
					width: max-content;
					padding: 8px 20px;
					color: white;
					background: $col_active;
					border-radius: 40px;
					margin-left: 12px;
					font-weight: bold;
				}
			}
			.operate{
				width: auto;
				.del{
					font-size: 14px;
					color: #999999;
				}
				.selStatus{
					width: auto;
					font-size: 14px;
					margin-right: 12px;
					.statusIcon{
						width: 20px;
						margin-right: 8px;
					}
				}
			}
		}
		.shopList{
			width: 100%;
			border-radius: 8px;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			background: white;
			.shopOne{
				width: 100%;
				padding: 12px;
				box-sizing:border-box;
				.status{
					width: 20px;
					height: 20px;
					margin-right: 12px;
				}
				.shopInfo{
					width: calc(100% - 32px);
					.shopImg{
						width: 92px;
						height: 92px;
						border-radius: 4px;
						overflow: hidden;
						background: #DEDEDE;
						margin-right: 12px;
						position:relative;
						image{
							width: 100%;
							min-height: 100%;
						}
						.noStock{
							width:100%;
							height: 100%;
							background: rgba(0, 0, 0, 0.3);
							padding: 12px;
							box-sizing: border-box;
							position: absolute;
							top:0;
							left:0;
							.stockDesc{
								font-size: 12px;
								width:100%;
								text-align: center;
								background: rgba(0, 0, 0, 0.5);
								color:white;
								padding:3px 0;
								border-radius: 50px;
							}
						}
					}
					.other{
						width: calc( 100% - 104px);
						.base{
							width: 100%;
							.price{
								color: #FF0000;
								font-size: 12px;
								text{
									font-size: 16px;
									font-weight: bold
								}
							}
						}
						.shopName{
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.spec{
							max-width: 80%;
							width: max-content;
							font-size: 12px;
							padding: 3px 8px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin: 8px 0 16px;
							border-radius: 4px;
							color: #FC9700;
							border: 1px solid #FC9700;
						}
					}
				}
			}
		}
	}
</style>
